import * as echarts from '../../ec-canvas/echarts';

Page({
  data: {
    // 当前选择的统计类型
    activeType: 'weekly', // weekly, monthly, yearly
    
    // 图表是否加载完成
    isChartReady: false,
    
    // 折线图配置
    lineChart: {
      lazyLoad: true
    },
    
    // 雷达图配置
    radarChart: {
      lazyLoad: true
    },
    
    // 柱状图配置
    barChart: {
      lazyLoad: true
    },
    
    // 里程碑数据
    milestones: [
      {
        id: 1,
        title: '学习了100个单词',
        date: '2023-04-01',
        icon: 'milestone-1',
        completed: true
      },
      {
        id: 2,
        title: '连续打卡7天',
        date: '2023-04-03',
        icon: 'milestone-2',
        completed: true
      },
      {
        id: 3,
        title: '单日学习超过30个单词',
        date: '2023-04-05',
        icon: 'milestone-3',
        completed: true
      },
      {
        id: 4,
        title: '学习了500个单词',
        date: '',
        icon: 'milestone-4',
        completed: false
      },
      {
        id: 5,
        title: '连续打卡30天',
        date: '',
        icon: 'milestone-5',
        completed: false
      }
    ]
  },
  
  onReady: function() {
    // 页面渲染完成后初始化图表
    this.initCharts();
  },
  
  // 初始化所有图表
  initCharts: function() {
    this.initLineChart();
    this.initRadarChart();
    this.initBarChart();
    
    this.setData({
      isChartReady: true
    });
  },
  
  // 切换统计周期
  switchType: function(e) {
    const { type } = e.currentTarget.dataset;
    this.setData({
      activeType: type
    });
    
    // 更新图表数据
    this.updateChartData(type);
  },
  
  // 根据类型更新图表数据
  updateChartData: function(type) {
    // 这里应该根据选择的类型从服务器获取数据
    // 目前使用模拟数据
    this.initLineChart(type);
  },
  
  // 初始化词汇量增长折线图
  initLineChart: function(type = 'weekly') {
    const chart = this.selectComponent('#lineChart');
    
    if (!chart) {
      console.error('无法获取图表组件实例');
      return;
    }
    
    let xAxisData = [];
    let seriesData = [];
    
    // 根据类型生成模拟数据
    if (type === 'weekly') {
      xAxisData = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
      seriesData = [12, 15, 10, 18, 20, 25, 15];
    } else if (type === 'monthly') {
      xAxisData = Array.from({length: 30}, (_, i) => `${i+1}日`);
      seriesData = Array.from({length: 30}, () => Math.floor(Math.random() * 30) + 5);
    } else {
      xAxisData = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
      seriesData = Array.from({length: 12}, () => Math.floor(Math.random() * 400) + 50);
    }
    
    chart.init((canvas, width, height, dpr) => {
      const lineChart = chart.initChart(canvas, width, height, dpr);
      const option = {
        color: ['#4CAF50'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: xAxisData,
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          }
        },
        yAxis: {
          type: 'value',
          name: '单词量',
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            color: '#666'
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [{
          name: '词汇量',
          type: 'line',
          data: seriesData,
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            width: 3
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(76, 175, 80, 0.3)'
              }, {
                offset: 1, color: 'rgba(76, 175, 80, 0.1)'
              }]
            }
          }
        }]
      };
      
      lineChart.setOption(option);
      return lineChart;
    });
  },
  
  // 初始化词类掌握雷达图
  initRadarChart: function() {
    const chart = this.selectComponent('#radarChart');
    
    if (!chart) {
      console.error('无法获取图表组件实例');
      return;
    }
    
    chart.init((canvas, width, height, dpr) => {
      const radarChart = chart.initChart(canvas, width, height, dpr);
      const option = {
        color: ['#2196F3'],
        radar: {
          name: {
            textStyle: {
              color: '#666',
              fontSize: 12
            }
          },
          indicator: [
            { name: '名词', max: 100 },
            { name: '动词', max: 100 },
            { name: '形容词', max: 100 },
            { name: '副词', max: 100 },
            { name: '短语', max: 100 }
          ],
          radius: '65%',
          splitArea: {
            areaStyle: {
              color: ['rgba(255, 255, 255, 0.5)'],
              shadowColor: 'rgba(0, 0, 0, 0.05)',
              shadowBlur: 10
            }
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        series: [{
          name: '词类掌握',
          type: 'radar',
          data: [
            {
              value: [85, 65, 75, 60, 70],
              name: '词类分布',
              areaStyle: {
                color: 'rgba(33, 150, 243, 0.3)'
              }
            }
          ]
        }]
      };
      
      radarChart.setOption(option);
      return radarChart;
    });
  },
  
  // 初始化学习时长分布柱状图
  initBarChart: function() {
    const chart = this.selectComponent('#barChart');
    
    if (!chart) {
      console.error('无法获取图表组件实例');
      return;
    }
    
    chart.init((canvas, width, height, dpr) => {
      const barChart = chart.initChart(canvas, width, height, dpr);
      const option = {
        color: ['#4CAF50'],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: ['7-9时', '9-11时', '11-13时', '13-15时', '15-17时', '17-19时', '19-21时', '21-23时'],
          axisLabel: {
            color: '#666',
            interval: 0,
            rotate: 30
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          }
        },
        yAxis: {
          type: 'value',
          name: '时长(分钟)',
          axisLabel: {
            color: '#666'
          },
          axisLine: {
            lineStyle: {
              color: '#ccc'
            }
          },
          splitLine: {
            lineStyle: {
              color: '#eee'
            }
          }
        },
        series: [{
          name: '学习时长',
          type: 'bar',
          barWidth: '60%',
          data: [10, 15, 30, 25, 20, 40, 60, 35],
          itemStyle: {
            borderRadius: [4, 4, 0, 0]
          }
        }]
      };
      
      barChart.setOption(option);
      return barChart;
    });
  }
})